import React, { useState } from 'react';
import { Article } from '@/interfaces/article';

interface ShareButtonProps {
  article: Article;
}

const ShareButton: React.FC<ShareButtonProps> = ({ article }) => {
  const [showShareMenu, setShowShareMenu] = useState(false);

  const shareUrl = window.location.href;
  const shareText = `Check out this article: ${article.title}`;

  const handleShare = async (platform: string) => {
    const urls = {
      twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(shareUrl)}`,
      facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`,
      linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`,
      copy: shareUrl
    };

    if (platform === 'copy') {
      try {
        await navigator.clipboard.writeText(shareUrl);
        alert('Link copied to clipboard!');
      } catch (err) {
        console.error('Failed to copy: ', err);
      }
    } else {
      window.open(urls[platform as keyof typeof urls], '_blank', 'width=600,height=400');
    }
    
    setShowShareMenu(false);
  };

  return (
    <div className="relative">
      <button
        onClick={() => setShowShareMenu(!showShareMenu)}
        className="flex items-center space-x-2 text-ios-gray-600 dark:text-ios-gray-400 hover:text-ios-blue transition-colors"
      >
        <svg 
          className="w-5 h-5" 
          fill="none" 
          stroke="currentColor" 
          viewBox="0 0 24 24"
        >
          <path 
            strokeLinecap="round" 
            strokeLinejoin="round" 
            strokeWidth={2} 
            d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z" 
          />
        </svg>
        <span className="font-medium">Share</span>
      </button>

      {showShareMenu && (
        <div className="absolute right-0 top-full mt-2 w-48 bg-white dark:bg-ios-gray-800 rounded-apple-md shadow-apple-lg border border-ios-gray-200 dark:border-ios-gray-700 z-50">
          <div className="py-2">
            <button
              onClick={() => handleShare('twitter')}
              className="w-full px-4 py-2 text-left text-ios-gray-700 dark:text-ios-gray-300 hover:bg-ios-gray-50 dark:hover:bg-ios-gray-700 transition-colors"
            >
              Share on Twitter
            </button>
            <button
              onClick={() => handleShare('facebook')}
              className="w-full px-4 py-2 text-left text-ios-gray-700 dark:text-ios-gray-300 hover:bg-ios-gray-50 dark:hover:bg-ios-gray-700 transition-colors"
            >
              Share on Facebook
            </button>
            <button
              onClick={() => handleShare('linkedin')}
              className="w-full px-4 py-2 text-left text-ios-gray-700 dark:text-ios-gray-300 hover:bg-ios-gray-50 dark:hover:bg-ios-gray-700 transition-colors"
            >
              Share on LinkedIn
            </button>
            <hr className="my-2 border-ios-gray-200 dark:border-ios-gray-700" />
            <button
              onClick={() => handleShare('copy')}
              className="w-full px-4 py-2 text-left text-ios-gray-700 dark:text-ios-gray-300 hover:bg-ios-gray-50 dark:hover:bg-ios-gray-700 transition-colors"
            >
              Copy Link
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default ShareButton;